<template>
  <div class="shareVideo">
    <div class="videoContainer" v-if="videoMsg">
<!--      视频-->
      <video-player  class="video-player vjs-custom-skin"
                     ref="videoPlayer"
                     :playsinline="true"
                     :options="playerOptions"
                     @pause="onPlayerPause($event)"
                     @play="onPlayerPlay($event)"
                     @ended="onPlayerEnded($event)"
      ></video-player>
<!--      描述-->
      <div class="describe">
        <div v-if="videoMsg.poi_name" class="positionName">
          <img src="http://job.dayinyun.com/videoPositionIcon.png" alt="">
          {{videoMsg.poi_name}}
        </div>
        <div v-if="videoMsg.nickname" class="nickName">
          <img :src="videoMsg.avatar?videoMsg.avatar:'http://job.dayinyun.com/defaultImg.png'" alt="">
          <div>{{videoMsg.nickname}}</div>
        </div>
        <div v-if="videoMsg.title" class="title">{{videoMsg.title}}</div>
        <button @click="download()">下载幻美APP</button>
      </div>
    </div>
  </div>
</template>

<script>
  import {GETSHAREVIDEO } from "../../apis/mine";

  export default {
    data() {
      return {
        videoMsg:{},//视频信息
        video_id:"",//视频id
        // 视频配置
        playerOptions: {
          // videojs options
          // width:690,
          // height:210,
          muted: false,
          language: 'zh-CN',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          aspectRatio: '5:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          sources: [{
            // type: 'application/x-mpegURL',
            type: "video/mp4",
            src:"",
          }],
          poster: "",
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
        }
      }
    },
    mounted() {
      this.getParams();
    },
    methods:{
      // 获取参数
      getParams(){
        var url = location.search; //获取url中"?"符后的字串 ('?modFlag=business&role=1')
        var theRequest = new Object();
        if ( url.indexOf( "?" ) != -1 ) {
          var str = url.substr( 1 ); //substr()方法返回从参数值开始到结束的字符串；
          var strs = str.split( "&" );
          for ( var i = 0; i < strs.length; i++ ) {
            theRequest[ strs[ i ].split( "=" )[ 0 ] ] = ( strs[ i ].split( "=" )[ 1 ] );
          }
          this.video_id = theRequest.video_id
          if(this.video_id){
            // 获取分享视频数据
            this.getShareVideo()
          }
          console.log( theRequest ); //此时的theRequest就是我们需要的参数；
        }
      },
      // 下载app
      download(){
        this.$router.push("download")
      },
      // ---------------------接口开始----------------
      //获取分享视频
      getShareVideo(){
        let getShareVideo = GETSHAREVIDEO
        let params = {
          video_id:this.video_id?this.video_id:'90fbe37293414b4391b59af4684e98cd',//视频id
        }
        getShareVideo(params).then(res=>{
          if(res.data.code*1===200){
            this.videoMsg = res.data.data;
            this.$nextTick(()=>{
              // 切换的时候视频初始化
              this.playerOptions.sources[0].src =  '';//视频路径
              this.playerOptions.poster = '';//默认封面图
              this.playerOptions.sources[0].src =  this.videoMsg.media;//视频路径
              this.playerOptions.sources[0].type = 'video/mp4';//视频类型
              this.playerOptions.poster = this.videoMsg.cover;//默认封面图
            })
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },

      // ---------------------接口结束---------------------------------
      // listen event
      onPlayerPlay(player) {
        console.log('player play!', player)
      },
      // 暂停播放
      onPlayerPause(player) {
        console.log('player pause!', player)
      },
      // 视频播放完成
      onPlayerEnded(){
        console.log('player Ended!', player)
      },
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .shareVideo{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    align-items: center;
    justify-content: center;
    .videoContainer{
      width:100%;
      object-fit:fill;
      /deep/.vjs-big-play-button{
        font-size: 2.5em;
        line-height: 2.3em;
        height: 2.5em;
        width: 2.2em;
        -webkit-border-radius: 2.5em;
        -moz-border-radius: 2.5em;
        border-radius: 50%;
        background-color: rgba(115,133,159,.5);
        border-width: 0.12em;
        margin-top: -1.25em;
        margin-left: -1.45em;
      }
      .describe{
        position: fixed;
        bottom:1rem;
        left:0.32rem;
        .positionName{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          max-width: 3rem;
          height:0.4rem;
          padding:0.06rem;
          box-sizing: border-box;
          background:rgba(0,0,0,0.4);
          border-radius: 0.05rem;
          margin-bottom: 0.16rem;
          font-size: @fontSize24;
          font-family:@fontFamily400;
          font-weight: @fontWeight400;
          line-height: 0.32rem;
          color: #FFFFFF;
          img{
            width:0.3rem;
            height:auto;
            margin-right:0.1rem;
          }
        }
        .nickName{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-size: @fontSize34;
          font-family:@fontFamily400;
          font-weight: @fontWeight500;
          line-height: 0.66rem;
          color: #F5F5F5;
          img{
            width:0.6rem;
            height:0.6rem;
            margin-right: 0.08rem;
          }
        }
        .title{
          font-size: @fontSize28;
          font-family: @fontFamily400;
          font-weight: @fontWeight400;
          line-height: 0.42rem;
          color: #FFFFFF;
          margin: 0.16rem 0;
        }
        button{
          width:3rem;
          height:0.6rem;
          border-radius: 0.05rem;
          background:#FD0000;
          font-size: @fontSize32;
          font-family:@fontFamily400;
          font-weight: @fontWeight400;
          line-height: 0.64rem;
          color: #F5F5F5;
        }
      }
    }
  }

</style>
